<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
         * 在ES6出现之前，存在很多模块化规范：AMD,CMD,CommonJS,UMD
         * 实现一个模块，其实就是一个立即执行函数，包括模块容器，定义模块，添加模块，处理模块依赖等
         * 模块的功能是向外暴露一些接口，以提供给其他模块依赖于该模块的场景使用
         * 模块的初始只执行一次，之后其他模块可多次使用该模块的接口
        */
        const module = (function() {
            const moduleList = {}
            function define(name, deps, action) {
                deps.forEach((dep, index) => deps[index] = moduleList[dep])
                moduleList[name] = action.apply(null, deps)
            }
            return {
                define
            }
        })()
        module.define('data', [] , function() {
            return {
                first(arr) {
                    return arr[0]
                },
                max(arr, key = '') {
                    return arr.sort((i1, i2) => key ? i2[key] - i1[key] : i2 - i1)[0]
                }
            }
        })
        module.define('user', ['data'], function(data) {
            const list = [
                {
                    title: 'Vue',
                    count: 10
                },
                {
                    title: 'React',
                    count: 5
                },
                {
                    title: 'Node',
                    count: 20
                }
            ]
            console.log(data.first(list));
            console.log(data.max(list, 'count'));
        })
    </script>
</body>
</html>